<template>
  <div>
    <!-- 组件 -->
    <template v-if="UserType && gameInfo">
      <component
        :is="item.component"
        v-for="(item, index) in stepList"
        v-show="stepActive === index"
        :key="index"
        :ref="'entry-' + item.component"
        :is-show="stepActive === index"
        :user-type="UserType"
        :current-user-type="'Delegation'"
        :dict="dict"
        :district="cache.district"
        :game-info="gameInfo"
        :user-team-info="userTeamInfo"
        :required-id-data="requiredIdData"
        @onPrevStep="doPrevStep"
        @onNextStep="doNextStep"
        @reGetUserType="reGetUserType"
      />
    </template>

    <div v-if="!(UserType && gameInfo)" class="page_loading fixed">
      <van-loading size="24px" vertical color="#fff">加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

import {
  api_GET_EventsManagementUserUserType, // 获取当前用户注册类型
  api_GET_EventsManagementDelegationId // 获取团体注册信息
} from '@/extend/api/gameswaggerApi/app';

import processInfo from '../components/processInfo.vue';
import processForm from '../components/processForm.vue';

export default {
  components: {
    processInfo,
    processForm
  },
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      pageLoading: false, // 关键性Loading,不可轻易false
      stepActive: 0, // 当前步骤位置
      stepList: [ // 步骤条数据
        {
          title: '确认申办机构',
          description: '',
          component: 'process-info'
        },
        {
          title: '填写申办资料',
          description: '',
          component: 'process-form'
        }
      ],
      requiredIdData: { // 后续步骤需要的ID，此页面不要调用
        delegationId: '',
        registerId: ''
      },
      userTeamInfo: null // 团体信息
    };
  },
  computed: {
    ...mapState({
      UserType: state => state.user.currentUserType,
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  watch: {
    'UserType': {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          this.requiredIdData.registerId = val.registerId;
          this.requiredIdData.delegationId = val.delegationId;
          this.getUserTeamInfo();
        }
      }
    }
  },
  created() {
    this.getDict();
    this.getDictByType(['district']);
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    reGetUserType() {
      this.pageLoading = true;
      api_GET_EventsManagementUserUserType()
        .then(res => {
          this.$store.dispatch('user/getSaveCurrentUserType', res);
          this.pageLoading = false;
        });
    },
    // 获取团体注册信息
    getUserTeamInfo() {
      if (this.UserType.delegationId) {
        api_GET_EventsManagementDelegationId(this.UserType.delegationId)
          .then(res => {
            this.userTeamInfo = res;
          })
          .catch(
            error => {
              this.$toast({ type: 'fail', message: `获取团体信息失败 ${error.error.message}` });
            }
          );
      } else {
        console.log('UserType中缺失delegationId');
      }
    },
    // 执行上一步
    doPrevStep () {
      if (this.stepActive <= 0) {
        return false;
      }
      this.stepActive--;
      return true;
    },
    // 执行下一步
    doNextStep () {
      if (this.stepActive >= this.stepMaxLen) {
        return false;
      }
      this.stepActive++;
      return true;
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
